<script setup lang='ts'>
import { useGetActControl, useGetCertificate, useGetHolderInfo, useGetLicense, useGetOrgHold, useGetStaff } from '@fl/api/man-api/enterprise-info-edit'
import { SearchForm, SearchTable } from '@fl/components'
import { formatTime } from '@fl/utils'
import { cloneDeep } from 'lodash-es'
import { computed, inject, ref, watchEffect } from 'vue'

import { investTypes } from './constant'

const supplierId: any = inject('supplierId')

const pager = {
    currentPage: 1,
    pageSize: 20,
    total: 0,
}
const tablePage4 = ref(cloneDeep(pager))
const tablePage5 = ref(cloneDeep(pager))

const searchRef = ref()

const dialogTableVisible = ref(false)
const detail = ref<any>([])

const state = {
    businessPeriod: '',
    businessRegistrationNumber: '',
    businessScope: '',
    date: '2024-01-10 13:42:43',
    establishmenDate: '',
    legalRepresentative: '',
    name: '', // 企业名称
    organizationStructureCode: '',
    recCap: '',
    registeredCapital: '',
    status: '',
    type: '',
    unifiedSocialCreditCode: '', // 信用代码
}

const form = ref(cloneDeep(state))

// 工商信息 表单配置
const group: any = [
    {
        columns: [
            {
                label: '统一社会信用代码',
                prop: 'unifiedSocialCreditCode',
                valueType: 'text',
            },
            {
                label: '企业名称',
                prop: 'name',
                valueType: 'text',
            },
            {
                label: '法定代表人',
                prop: 'legalRepresentative',
                valueType: 'text',
            },
            {
                label: '登记状态',
                prop: 'businessStatus',
                valueType: 'text',
            },
            {
                label: '成立日期',
                prop: 'establishmenDate',
                valueType: 'text',
            },
            {
                label: '企业性质',
                prop: 'type',
                valueType: 'text',
            },
            {
                label: '注册资本',
                prop: 'registeredCapital',
                valueType: 'text',
            },
            {
                label: '实缴资本',
                prop: 'recCap',
                valueType: 'text',
            },
            {
                label: '组织机构代码',
                prop: 'organizationStructureCode',
                valueType: 'text',
            },
            {
                label: '工商注册号',
                prop: 'businessRegistrationNumber',
                valueType: 'text',
            },
            {
                label: '纳税人识别号',
                prop: 'aaa',
                valueType: 'text',
            },
            {
                label: '企业类型',
                prop: 'type',
                valueType: 'text',
            },
            {
                label: '营业期限',
                prop: 'businessPeriod',
                valueType: 'text',
            },
            {
                label: '纳税人资质',
                prop: 'aaa',
                valueType: 'text',
            },
            {
                label: '人员规模',
                prop: 'aaa',
                valueType: 'text',
            },
            {
                label: '参保人数',
                prop: 'aaa',
                valueType: 'text',
            },
            {
                label: '所属地区',
                prop: 'contactAddress',
                valueType: 'text',
            },
            {
                label: '登记机关',
                prop: 'registrationUthority',
                valueType: 'text',
            },
            {
                label: '国标行业',
                prop: 'aaa',
                valueType: 'text',
            },
            {
                label: '注册地址',
                prop: 'registeredAddress',
                valueType: 'text',
            },
            {
                label: '核准日期',
                prop: 'establishmenDate',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 24,
                },
                label: '经营范围',
                prop: 'businessScope',
                valueType: 'text',
            },
        ],
        title: '工商信息',
    },
]

// 查询工商信息
const { data: licenseData, isLoading } = useGetLicense(supplierId)

watchEffect(() => {
    if (licenseData.value) {
        form.value = {
            ...form.value,
            ...licenseData.value,
        }
    }
})

// 股东信息
const col = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'name', title: '股东名称' },
    { slots: { default: 'regCapital' }, title: '认缴出资金额(万元)' },
    { slots: { default: 'time' }, title: '认缴出资日期' },
    { slots: { default: 'percent' }, title: '认缴占比' },
    { slots: { default: 'regCapital2' }, title: '实缴出资金额(万元)' },
    { slots: { default: 'time2' }, title: '实缴出资日期' },
    { slots: { default: 'percent2' }, title: '实缴占比' },
]

// 疑似控制人
const col2 = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'name', title: '控制人名称' },
    { field: 'ratio', title: '最终受益人股份' },
]

// 主要人员
const col3 = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'name', title: '姓名' },
    { slots: { default: 'typeJoin' }, title: '职位' },
]

// 控制企业
const col4 = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'name', title: '企业名称' },
    { field: 'regStatus', title: '经营状态' },
    { slots: { default: 'investType' }, title: '投资方式' },
    { field: 'estiblishTime', slots: { default: 'estiblishTime' }, title: '成立日期' },
    { field: 'regCapital', title: '注册资本（万元）' },
    { field: 'percent', title: '投资占比' },
    { field: 'legalPersonName', title: '法人' },
    // { field: 'legalType', title: '法人类型' },
]

// 资质证书
const col5 = [
    { title: '序号', type: 'seq', width: 70 },
    { field: 'certificateName', title: '证书类型' },
    // { slots: { default: 'type' }, title: '证书类型' },
    { field: 'certNo', title: '证书编号' },
    { field: 'startDate', title: '证书生效时间' },
    { field: 'endDate', title: '证书截止日期' },
    // { slots: { default: 'org' }, title: '发证机构' },
    // { slots: { default: 'status' }, title: '证书状态' },
    { slots: { default: 'operate' }, title: '证书状态' },
]

const getKeyword = computed(() => {
    // 公司名称查询
    return inject('supplierName')
})

const params = computed(() => {
    return {
        keyword: getKeyword.value,
        pageNum: 1,
        pageSize: 20,
    }
})

const { data } = useGetHolderInfo(params)
const { data: data2 } = useGetActControl(params)
const { data: data3 } = useGetStaff(params)

const params4 = computed(() => {
    return {
        keyword: getKeyword.value,
        pageNum: tablePage4.value.currentPage,
        pageSize: tablePage4.value.pageSize,
    }
})
const { data: data4 } = useGetOrgHold(params4)

const params5 = computed(() => {
    return {
        keyword: getKeyword.value,
        pageNum: tablePage5.value.currentPage,
        pageSize: tablePage5.value.pageSize,
    }
})
const { data: data5 } = useGetCertificate(params5)

watchEffect(() => {
    if (data4.value) {
        tablePage4.value.total = data4.value?.total ?? 0
    }
    if (data5.value) {
        tablePage5.value.total = data5.value?.total ?? 0
    }
})

function getIvType(row: any) {
    const type = row.chainList[0][0]?.investType ?? 0
    const target = type ? investTypes.find((v: any) => v.value === type)?.label ?? type : type
    return target
}

// 根据label 查询val
function getVal(source: any, label: string) {
    return source.find((v: any) => v.title === label)?.content ?? ''
}

function view(row: any) {
    console.log(11111, row)
    dialogTableVisible.value = true
    detail.value = row.detail
}
</script>

<template>
    <div class="w-full">
        <SearchForm ref="searchRef"
                    v-model="form"
                    v-loading="isLoading"
                    :has-footer="false"
                    :group="group"
                    label-position="top"
        />

        <ElCard class="mb-20">
            <template #header>
                <span>股东信息
                    <span v-if="data?.total">({{ data?.total }})</span>
                </span>
            </template>

            <SearchTable v-bind="{ height: 400, columns: col, rowConfig: { keyField: 'id' } }"
                         :data="data?.items ?? []"
            >
                <!-- 认缴 -->
                <template #regCapital="{ row }">
                    {{ row.capital[0]?.amomon }}
                </template>

                <template #percent="{ row }">
                    {{ row.capital[0]?.percent }}
                </template>

                <template #time="{ row }">
                    {{ row.capital[0]?.time }}
                </template>
                <!-- 实缴 -->
                <template #regCapital2="{ row }">
                    {{ row.capitalActl[0]?.amomon }}
                </template>

                <template #percent2="{ row }">
                    {{ row.capitalActl[0]?.percent }}
                </template>

                <template #time2="{ row }">
                    {{ row.capitalActl[0]?.time }}
                </template>
            </SearchTable>
        </ElCard>

        <ElCard class="mb-20">
            <template #header>
                <span>疑似控制人
                    <span v-if="data2?.actualControllerList?.length">({{ data2.actualControllerList.length }})</span>
                </span>
            </template>

            <SearchTable v-bind="{ height: 200, columns: col2, rowConfig: { keyField: 'hPid' } }"
                         :data="data2?.actualControllerList ?? []"
            />
        </ElCard>

        <ElCard class="mb-20">
            <template #header>
                <span>主要人员
                    <span v-if="data3?.total">({{ data3?.total }})</span>
                </span>
            </template>

            <SearchTable v-bind="{ height: 400, columns: col3, rowConfig: { keyField: 'id' } }"
                         :data="data3?.items ?? []"
            >
                <template #typeJoin="{ row }">
                    {{ row.typeJoin.join(',') }}
                </template>
            </SearchTable>
        </ElCard>

        <ElCard class="mb-20">
            <template #header>
                <span>控制企业
                    <span v-if="data4?.total">({{ data4?.total }})</span>
                </span>
            </template>

            <SearchTable v-bind="{ height: 400, columns: col4, rowConfig: { keyField: 'cid' } }"
                         v-model:pager="tablePage4"
                         :data="data4?.items ?? []"
            >
                <template #investType="{ row }">
                    {{ getIvType(row) }}
                </template>

                <template #estiblishTime="{ row }">
                    {{ row.estiblishTime ? formatTime(new Date(Number(row.estiblishTime)), 'yyyy-MM-dd') : '' }}
                </template>
            </SearchTable>
        </ElCard>

        <ElCard class="mb-20">
            <template #header>
                <span>资质证书
                    <span v-if="data5?.total">({{ data5?.total }})</span>
                </span>
            </template>

            <SearchTable v-bind="{ height: 500, columns: col5, rowConfig: { keyField: 'id' } }"
                         v-model:pager="tablePage5"
                         :data="data5?.items ?? []"
            >
                <template #type="{ row }">
                    {{ getVal(row.detail, '认证项目') }}
                </template>

                <template #org="{ row }">
                    {{ getVal(row.detail, '发证机构-机构名称') }}
                </template>

                <template #status="{ row }">
                    {{ getVal(row.detail, '证书状态') }}
                </template>

                <template #operate="{ row }">
                    <ElSpace>
                        <span class="text-#409EFF cursor-pointer"
                              @click="view(row)"
                        >
                            详情
                        </span>
                    </ElSpace>
                </template>
            </SearchTable>
        </ElCard>
    </div>

    <el-dialog v-model="dialogTableVisible"
               title="资质证书详情"
    >
        <el-descriptions :column="1"
                         border
                         class="desc-group"
        >
            <el-descriptions-item v-for="(item, index) in detail"
                                  :key="index"
            >
                <template #label>
                    {{ item.title }}
                </template>
                {{ item.content }}
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<style lang="less" scoped>
.desc-group {
    min-height: 50vh;
    max-height: 70vh;
    overflow: auto;

    :deep(.el-descriptions__label) {
        width: 240px;
    }
}
</style>
